<!--
* 页面tip提示工具，可记住关闭，可显示关闭按钮，可自定颜色，自定内容
* 显示关闭按钮：属性：showClose
* 标记后缀 属性：strEnd
-->
<template>
    <div class="page-tips" v-if="ptVisible==1">
        <slot></slot>
        <i class="fa fa-close close-tip" v-if="showClose" @click="ptHide()"></i>
    </div>
</template>

<script type="text/javascript">

	/*加载资源*/

    export default {
        name: 'pageTip',
	    props: {
        	//是否显示关闭
		    showClose: { type: Boolean, default: false },
		    //用于记住关闭的后缀
		    strEnd: { type: String, default: 'default' },
	    },
	    mixins:[],
        data () {
            return {
            	strStart: 'ptVisible-' , //储存标记的前缀
	            ptVisible:1,//页面tip可见性
            }
        },
        computed: {
        },
        created () {
	        //处理tip显示
	        localStorage.getItem(this.strStart + this.strEnd) == '0' && (this.ptVisible = 0)
        },
        methods:{
	        //隐藏
	        ptHide () {
		        localStorage.setItem(this.strStart + this.strEnd, '0'); this.ptVisible = 0
	        },
        }
    }
</script>

<style lang="less" scoped>

    /*公共变量*/
    @import '~@/assets/global.less';
	.page-tips {
        color:#333;
		font-size: 14px;
		max-width: 600px;
		padding: 10px;
		margin:0px auto 10px;
		border-radius: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
        background-color: rgba(255, 255, 255, 0.9)
	}
    .page-tips .close-tip {color:#e00;font-size: 22px;cursor: pointer;margin-left: 5px;}

    /**********************适应************************/
    @media screen and (max-width: @MINSCREEN){

    }



</style>
